<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<th:block th:fragment="sidebar">

    <!-- 左侧导航栏 -->
    <div class="sidebar" id="sidebar_app">

        <ul class="nav w-full">
            <li class="nav-item w-full" v-for="(item,index) in navItems" @click="sidebar_selectNav(item,index)">
                <a class="nav-link block box-border w-full"
                   :class="{'active':block_hash==item.hash}"
                   :href="item.hash">
                    <i class="fas" :class="item.icon"></i>{{item.label}}
                </a>
            </li>
        </ul>
        <link rel="stylesheet" href="/css/sidebar.css">
    </div>

    <script>
        var vue_sidebar_app = new Vue({
            el: '#sidebar_app',
            data: {
                block_hash: window.location.hash || '#robot',
                // navIdx: 0,
                navItems: [
                    {label: '机器人管理', icon: 'fa-robot', hash: '#robot'},
                    {label: '对话记录', icon: 'fa-comments', hash: '#conversation'},
                    // {label: '仪表盘', icon: 'fa-chart-line', hash: '#'},
                ]
            },
            created: function () {

            },
            methods: {
                sidebar_selectNav: function (item, index) {
                    this.block_hash = item.hash
                    // console.log('item->', item)
                },
            }
        })
    </script>

</th:block>

</body>
</html>